<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>重置密码</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue_resource.js"></script>
		<!-- Bootstrap core CSS-->
		<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom fonts for this template-->
		<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- Custom styles for this template-->
		<link href="css/sb-admin.css" rel="stylesheet">
		<style type="text/css">
			body{
				background-image: url(image/1.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.input{
				background: none;
			}
			.font{
				/*color:white;*/
			}

		</style>
	</head>

	<body>
		<div id="reset" class="container" style="width:500px ; background: none;">
			<div class="card card-login mx-auto mt-5" style="background-color: rgba(0,0,0,0.1);">
				<div class="card-header font">重置密码</div>
				<div class="card-body">
					<form>
						<div class="form-group font" >
							<label for="exampleInputEmail1">验证码</label>
							<span id="s"></span>
							<input @blur="re()" placeholder="输入验证码" class="form-control input" id="code" type="text" aria-describedby="emailHelp" v-model="code">
						</div>
						<div class="form-group font" >
							<label for="exampleInputEmail1">用户名</label>
							<span id="s1"></span>
							<input @blur="re1()" placeholder="输入用户名" class="form-control input" id="name" type="text" v-model="name">
						</div>
						<div class="form-group font">
							<label for="exampleInputPassword1">新的密码</label>
							<span id="s2"></span>
							<input @blur="re2()" placeholder="新的密码"  class="form-control input" id="password" type="password" v-model="pw">
						</div>
						<div class="form-group font">
							<label for="exampleInputPassword1">确认密码</label>
							<span id="s3"></span>
							<input @blur="re3()" placeholder="确认密码" class="form-control input" id="Repassword" type="password" v-model="repw">
						</div>
						<a class="btn btn-block" @click="post()" style="background-color: #E0E0E0;">提交</a>
					</form>
				</div>
			</div>
		</div>
		<!-- Bootstrap core JavaScript-->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
		<!-- Core plugin JavaScript-->
		<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
		<script>
			var url = "http://localhost:8082/";
			var REuserName = /^[a-zA-Z]{1}\w{5,12}$/; //用户名正则表达式
			var REpassWord = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/; //密码正则表达式
			var vm = new Vue({
				el: "#reset",
				data: {
					msg: "",
					code: "",
					name: "",
					pw: "",
					repw: ""
				},
				methods: {
					re(){
						if(vm.code ==''){
							document.getElementById("s").innerHTML="验证码不能为空！";
							document.getElementById("s").style.color="red";
						}else{
							document.getElementById("s").innerHTML="√";
							document.getElementById("s").style.color="green";
						}
					},
					re1() {
						//用户名判断
						if(vm.name == '') {
							document.getElementById("s1").innerHTML = "用户名不能为空！";
							document.getElementById("s1").style.color = "red";
						}
						if(vm.name != '' && !REuserName.test(vm.name)) {
							document.getElementById("s1").innerHTML = "用户名错误！";
							document.getElementById("s1").style.color = "red";
						}
						if(REuserName.test(vm.name)) {
							document.getElementById("s1").innerHTML = "√";
							document.getElementById("s1").style.color = "green";
						}
					},
					re2() {
						//密码判断
						if(vm.pw == '') {
							document.getElementById("s2").innerHTML = "密码不能为空！";
							document.getElementById("s2").style.color = "red";
						}
						if(vm.pw != '' && !REpassWord.test(vm.pw)) {
							document.getElementById("s2").innerHTML = "密码格式错误！";
							document.getElementById("s2").style.color = "red";
						}
						if(REpassWord.test(vm.pw)) {
							document.getElementById("s2").innerHTML = "√";
							document.getElementById("s2").style.color = "green";
						}
					},
					re3(){
						if(REpassWord.test(vm.repw) == true ) {
							if(vm.pw == vm.repw){
								document.getElementById("s3").innerHTML = "√";
								document.getElementById("s3").style.color = "green";
							}else{
								document.getElementById("s3").innerHTML = "两次密码不一致";
								document.getElementById("s3").style.color = "red";
							}
						} 
						if(vm.repw ==''){
							document.getElementById("s3").innerHTML = "密码不能为空！";
							document.getElementById("s3").style.color = "red";
						}
						if(REpassWord.test(vm.repw) == false){
							document.getElementById("s3").innerHTML = "密码格式错误！";
							document.getElementById("s3").style.color = "red";
						}
					},
					post() {
						if(vm.code != null && REuserName.test(vm.name) == true && REpassWord.test(vm.pw) == true && vm.repw == vm.pw) {
							this.$http.post(url+'resetPassword', {
								userName: vm.name,
								emailCode: vm.code,
								newPassWord: vm.pw,

							}, {
								emulateJSON: true
							}).then(
								function(res) {
									vm.msg = res.body;
									if(vm.msg.success == true){
										alert(vm.msg.msg);
										location.href = "login.html";
									}else {
										if(vm.msg.msg== "验证码不正确,请重新发邮件"){
											alert(vm.msg.msg);
											location.href="forgot-password.html";
										}
										alert(vm.msg.msg);
										location.href = "reset-password.html";
									}
									
								},
								function() {
									console.log("连接失败！");
								}
							)
						}

					}
				}
			})
		</script>
	</body>

</html>